<template>
	<div class="mine-red-packet">
		<div v-if="coverBoxShow" class="red-code-base64-box">
			<!--<div class="redCodeBase64Center">
				<div>
					<img :src="redCodeBase64">
					<p v-if="footerType===3">截图保存二维码，微信扫码兑换红包</p>
					<p v-else>长按上方识别二维码即可兑换红包</p>
				</div>
				<img class="closeMe" @click="closeMe" src='./../../assets/images/closeCode.png'>
			</div>-->
			<div class="conversion-box">
				<div class="white-bg-box">
					<p class="conversion-title">红包可在7天内进行有效兑换</p>
					<div class="er-img-box">
						<img v-if="isMoHuImg" class="er-code-img" src="../../assets/images/hongBao/dim-packet-red.png" />
						<p v-if="isMoHuImg" class="er-time">预计二维码展示时间：<br />{{exchangeTime}}</p>
						<img v-if="isBase64Img" class="er-code-img" :src="redCodeBase64" />

					</div>
					<p v-if="isBase64Img" class="tip-text1">微信识别二维码兑换红包</p>
					<div class="close-btn" @click="closeMe">
						关闭
					</div>
				</div>
			</div>

		</div>
		<div class="mineRedPacket-box">
			<div :class="[redPacketBoxTip]">
				<p class="redPacketdiv">{{redTip}}</p>
			</div>
			<!--没有红包提示信息-->
			<div class="noRedPacketTip-box" v-if="noRedPacket">
				<img src="../../assets/images/noredpaket.png" />
			</div>
			<ZxyhHeader v-if="$channel == 'zxyh' && getPlatform == 'app'" :title="'我的红包'" :isClose='false' :isRule='true' @rule ='showPopup'></ZxyhHeader>
			<div v-else class="mineRedPacket-box-title">
				<div v-if="isBack" class="back" @click="mineRedPacketBack"></div>
				<p class="my-redPacket-box">我的红包<span @click="showPopup">兑换规则<i class="iconfont iconwenhao"></i></span></p>
			</div>
			<div class="connectRedBox" v-if="redPacketIsLength">
				<header>
					<p class="mineRedPacket-header-price">金额</p>
					<p class="mineRedPacket-header-time">领取时间</p>
					<p class="mineRedPacket-header-operation">操作</p>
				</header>
				<div class="mineRedPacket-connect-box" ref="mineRedPacketBox">
					<ul class="connect" ref='connect'>
						<li v-for="(v,index)  in hongbaoArrayList" :key="index">
							<!--可以兑换-->
							<div v-if="v.isExchange==true">
								<div v-if="v.exchange=='1'">
									<div class="li-left">
										<div class="li-nummoney">
											￥{{v.money}}
										</div>
										<div class="li-date">
											{{v.snatchTime}}
										</div>
										<p>有效期至：{{v.exchangeExpTime}}</p>
									</div>
									<div class="lineSX"></div>
									<div class="li-right">
										<div class="li-btn" @click="redPacketDH(v,'去兑换')">
											去兑换
										</div>
									</div>
								</div>
								<div v-else>
									<div class="li-left huiColor">
										<div class="li-nummoney color99">
											￥{{v.money}}
										</div>
										<div class="li-date color99">
											{{v.snatchTime}}
										</div>
										<p class="color99">有效期至：{{v.exchangeExpTime}}</p>
									</div>
									<div class="lineSX lineSXgay"></div>
									<div class="li-right huiColor">
										<div class="li-btn btnHui">
											已兑换
										</div>
									</div>
								</div>
							</div>
							<!--兑换提醒-->
							<div v-else>
								<div class="li-left">
									<div class="li-nummoney">
										￥{{v.money}}
									</div>
									<div class="li-date">
										{{v.snatchTime}}
									</div>
									<p>有效期至：{{v.exchangeExpTime}}</p>
								</div>
								<div class="lineSX"></div>
								<div class="li-right">
									<div class="li-btn" @click="redPacketDH(v,'兑换提醒')">
										兑换提醒
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<van-popup v-model="exchangeRulesShow" class="van-popup" :close-on-click-overlay="false">
			<div class="exchange-rules-box">
				<p class="title">红包兑换提示</p>
				<!-- 微信 弹框二维码 长按 -->
				<div class="tip-connect" v-if="footerType===1">
					<p>1.长按识别红包兑换二维码，允许“视吧LIVE”获取相关权限。</p>
					<p>2.请于红包领取后的7个自然日内进行兑换，逾期不可兑换，兑换成功后预计24小时内到账至微信钱包。</p>
					<p>3.请妥善保存兑换二维码，切勿转发给他人。</p>
				</div>
				<!-- app 弹框二维码 截图 -->
				<div class="tip-connect" v-if="footerType===2">
					<p>1.截图保存红包兑换二维码，通过微信扫码允许“视吧LIVE”获取相关权限。</p>
					<p>2.请于红包领取后的7个自然日内进行兑换，逾期不可兑换，兑换成功后预计24小时内到账至微信钱包。</p>
					<p>3.请妥善保存兑换二维码，切勿转发给他人。</p>
				</div>
			</div>
		</van-popup>
		<div v-if="exchangeRulesShow" class="forkOff" @click="closePopup"></div>
	</div>
</template>
<script>
	require("jr-qrcode");
	import config from "@/config"
	import ZxyhHeader from '@/components/zxyh/zxyhHeader'
	export default {
		components:{
		 ZxyhHeader
		},
		data() {
			return {
				redPacketIsLength: false, //红包长度为0的时候显示提示页面
				noRedPacket: false,
				un: this.$store.state.userInfo.un,
				hongbaoArrayList: [],
				hongbaoArrayListScroll: [],
				flag: true,
				flag1: true,
				curr_page: 1,
				redTip: "", //红包请求提示消息
				redPacketBoxTip: "redPacketBoxHide", //红包提示动画
				redCodeBase64: "",
				coverBoxShow: false,
				footerType: null, //1 微信  2 app
				isBack: false, //返回按钮显示不显示
				exchangeRulesShow: false, //兑换规则是否显示
				exchangeTime: '', //兑换的时间
				isMoHuImg: false, //模糊图片
				isBase64Img: false, //二维码src
				getPlatform:fun.getPlatform(), //app wx
			};
		},
		created: function() {
			//isExchange true 可以兑换  false不可以兑换
			this.dotNumPage() //页面打点
			this.$store.dispatch("hideNav");
			var ua = navigator.userAgent.toLowerCase();
			if(/MicroMessenger/i.test(ua)) { //微信
				this.footerType = 1;
				this.isBack = true;
				if(this.$channel == 'gszq') { //工商（修正为国盛）证券要去掉返回
					this.isBack = false
				}
			} else { //非微信包括app
				this.footerType = 2;
				if(this.$channel == 'gsyh') { //工商银行显示
					this.isBack = true
				} else {
					this.isBack = false
				}
			}
         if(window.terminal.isMsyhApp){//msyh app首页返回博客厅
	      	 let titleParams = {
      			"title": "民生直播间",
      			"leftButton": {
      				"exist": "true", // 返回左按钮的简单写法,点击返回时,返回上一级菜单(服务器不需要定义返回事件时使用)
      				"name": "返回", //
      				"func": "goRoute()" // 返回上一级
      			},
      			"rightButton": { // 右按钮
      				"exist": "false", // true显示右按钮，false:不显示右按钮
      				"name": "关闭", // 右按钮显示的文字
      				"func" : "goBack()" // 点击右按钮时,客户端回调服务器的js方法 关闭webview按钮
      			}
      		}
	      	setTitleBar(titleParams); //设置返回
	      }
		},
		mounted: function() {
			this.getRedData();
			let _this = this;
			setTimeout(function() {
				let box = _this.$refs.mineRedPacketBox;
				let connect = _this.$refs.connect;
				if(box) {
					box.addEventListener("scroll", () => {
						if(
							parseInt(box.scrollTop) + parseInt(box.offsetHeight) - 14 >
							connect.scrollHeight &&
							_this.flag &&
							_this.flag1
						) {
							_this.curr_page++;
							_this.flag = false;
							var HongBaoData = {
								qid: new Date().getTime(),
								curr_page: _this.curr_page,
								page_size: 8,
								payee_act: _this.un
							};
							_this.$http
								.post("/packet/q_user_packet", HongBaoData, {
									headers: {
										"Content-Type": "application/json"
									}
								})
								.then(
									res => {
										if(res.data.code == "000000") {
											_this.hongbaoArrayListScroll = res.data.data;
											for(
												var i = 0; i < _this.hongbaoArrayListScroll.length; i++
											) {
												_this.hongbaoArrayList.push(
													_this.hongbaoArrayListScroll[i]
												);
											}
											if(res.data.data.length == "0") {
												_this.flag1 = false;
											}
										}
									},
									err => {
										console.log(err);
									}
								);

							//数据节流
							setTimeout(function() {
								_this.flag = true;
							}, 500);
						}
					});
				}
			}, 1000);
		},
		methods: {
			dotNumPage() { //统计
				let _this = this;
				var argumentData = {
					sessionId: "mineRedPacket_page", //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app 游客为web
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
			mineRedPacketBack() {
				this.$router.push(`/${this.$channel}/mine`);
			},
			//用户红包数据
			getRedData() {
				var HongBaoData = {
					qid: new Date().getTime(),
					curr_page: this.curr_page,
					page_size: 8,
					payee_act: this.un
				};
				this.$http
					.post("/packet/q_user_packet", HongBaoData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							if(res.data.code == "000000") {
								this.hongbaoArrayList = res.data.data;
								if(res.data.data.length) {
									this.redPacketIsLength = true;
								} else {
									this.noRedPacket = true;
									this.redPacketIsLength = false;
								}
							}
						},
						err => {
							console.log(err);
						}
					);
			},
			//红包兑换
			redPacketDH(v, type) {
				if(type == '去兑换') {
					let jmStr = v.redPacketInfo;
					let buildUrl = `${config.API_HOST}auth/redpacketsync?redPacketInfo=${v.redPacketInfo}&payee_act=${v.payeeAct}`;
					let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3f8ffdf8f070dbf6&redirect_uri=${encodeURIComponent(buildUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
					let imgBase64 = jrQrcode.getQrBase64(url);
					this.redCodeBase64 = imgBase64;
					this.isMoHuImg = false;
					this.isBase64Img = true;
					this.coverBoxShow = true;
				} else if(type == '兑换提醒') {
					this.exchangeTime = v.exchangeTime.slice(5, 16);
					this.isMoHuImg = true;
					this.isBase64Img = false;
					this.coverBoxShow = true;
				}
			},
			closeMe() {
				this.coverBoxShow = false;
			},
			// 展示兑换规则
			showPopup() {
				this.exchangeRulesShow = true;
			},
			//  关闭兑换规则
			closePopup() {
				this.exchangeRulesShow = false;
			}
		}
	};
</script>

<style scoped="scoped">
	.mineRedPacket-box-title {
		position: relative;
	}

	.mineRedPacket-box-title p {
		width: 100%;
		height: 80px;
		position: relative;
		font-size: 36px;
		text-align: center;
		line-height: 80px;
		color: #333333;
	}

	.my-redPacket-box span {
		position: absolute;
		right: 40px;
		font-size: 26px;
		font-weight: 500;
		color: #D04648;
	}

	.my-redPacket-box span i {
		margin-left: 10px;
	}

	.back {
		width: 65px;
		height: 55px;
		background: url(../../assets/images/iconsmall.png) no-repeat;
		background-size: 150px 150px;
		position: absolute;
		top: 20px;
		left: 40px;
		z-index: 100;
	}

	.mineRedPacket-box {
		background: white;
		width: 750px;
		height: 1334px;
		float: left;
	}

	header {
		width: 750px;
		height: 80px;
		background: rgba(255, 255, 255, 1);
		border-radius: 15px;
		display: flex;
		box-shadow: 0px 3px 10px 0px rgba(232, 232, 232, 0.4);
	}

	header p {
		float: left;
		line-height: 80px;
		color: #1d1d1d;
		font-size: 32px;
	}

	.mineRedPacket-header-price {
		width: 120px;
		text-align: center;
		flex: 2;
	}

	.mineRedPacket-header-time {
		width: 400px;
		text-align: center;
		flex: 3;
	}

	.mineRedPacket-header-operation {
		width: 125px;
		flex: 2;
		text-align: center;
	}

	.connect li {
		width: 670px;
		height: 160px;
		/*background: url(../../assets/images/mineLi.png) no-repeat;*/
		background-size: 750px 196px;
		border-radius: 15px;
		/*background: pink;*/
		margin-top: 20px;
		color: #1d1d1d;
		float: left;
		margin-left: 40px;
	}

	.li-left {
		width: 514px;
		height: 160px;
		/*background: silver;*/
		float: left;
		background: #CC3538;
		background: rgba(204, 53, 56, 0.1);
		box-shadow: 0px 1px 7px 1px rgba(1, 1, 1, 0.1);
		border-radius: 15px;
		/*border-right:4px dotted white;*/
	}

	.lineSX {
		width: 2px;
		height: 140px;
		border: 2px dashed rgba(204, 53, 56, 0.1);
		float: left;
		margin-top: 12px;
		background: white;
	}

	.lineSXgay {
		border: 2px dashed #f4f4f4;
		background: #e9e9e9;
	}

	.li-right {
		width: 150px;
		height: 160px;
		/*background: skyblue;*/
		color: rgba(153, 153, 153, 1);
		font-size: 26px;
		float: left;
		background: #026A7B;
		background: rgba(204, 53, 56, 0.1);
		box-shadow: 0px 1px 7px 1px rgba(1, 1, 1, 0.1);
		border-radius: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.li-nummoney {
		width: 180px;
		height: 160px;
		/*background: #1D1D1D;*/
		float: left;
		font-size: 40px;
		line-height: 160px;
		text-align: center;
		color: #CC3538;
		float: left;
		margin-right: 10px;
		font-weight: bold;
	}

	.li-date {
		width: calc(100vw - 426px);
		height: 95px;
		/*background: fuchsia;*/
		float: left;
		line-height: 120px;
		text-align: left;
		color: #333333;
		font-size: 28px;
		font-weight: 500;
	}

	.li-left p {
		width: 320px;
		height: 60px;
		/*background: darkorchid;*/
		float: left;
		font-size: 20px;
		text-align: left;
		color: #A9A8A8;
		font-weight: 500;
	}

	.li-btn {
		border-radius: 17px;
		font-size: 26px;
		line-height: 50px;
		text-align: center;
		color: white;
		width: 140px;
		height: 50px;
		background: #CC3538;
		border-radius: 25px;
	}

	.connect-left {
		width: 150px;
		height: 120px;
		line-height: 120px;
		text-align: center;
		border-right: 4px dotted rgba(187, 187, 187, 1);
		display: inline-block;
		float: left;
	}

	.connect-middle {
		width: 450px;
		height: 120px;
		display: inline-block;
		float: left;
		padding-left: 20px;
		font-size: 32px;
	}

	.connect-middle-p1 {
		margin-top: 30px;
	}

	.connect-middle-p2 {
		font-size: 24px;
		margin-top: 15px;
	}

	.connect-right {
		width: 150px;
		height: 120px;
		/*background: azure;*/
		display: inline-block;
		float: left;
	}

	.connect-right-btn {
		width: 120px;
		height: 60px;
		background: rgba(187, 187, 187, 1);
		box-shadow: 0px 1px 5px 1px rgba(8, 9, 6, 0.1);
		border-radius: 15px;
		color: white;
		text-align: center;
		line-height: 60px;
		margin: 24px 20px;
	}

	.connect-right-btnred {
		width: 120px;
		height: 60px;
		background: #cc3538;
		box-shadow: 0px 1px 5px 1px rgba(8, 9, 6, 0.1);
		border-radius: 15px;
		color: white;
		text-align: center;
		line-height: 60px;
		margin: 24px 20px;
	}

	.redPacket-more {
		width: 750px;
		height: 32px;
		color: #cc3538;
		line-height: 32px;
		text-align: center;
		margin-top: 30px;
	}

	.mineRedPacket-connect-box {
		padding-bottom: 30px;
		overflow: scroll;
		height: calc(100vh - 180px);
		/* background:rgba(244,244,244,1); */
	}

	.connect {
		width: 750px;
		float: left;
	}
	/* footer {
		width: 750px;
		height: 400px;
	} */

	.footer-tip {
		width: 210px;
		height: 50px;
		background: rgba(204, 45, 48, 1);
		border-radius: 10px;
		color: white;
		line-height: 50px;
		font-size: 28px;
		text-align: center;
		margin: 40px 0 0 20px;
	}

	.footer-connect {
		width: 710px;
		height: auto;
		margin: 50px auto 0;
		/*background: darkcyan;*/
		font-size: 22px;
		color: #0c0c0c;
		text-align: justify;
		line-height: 33px;
		background: white;
		padding: 25px 10px;
		border-radius: 10px;
	}

	.footer-connect p {
		margin-bottom: 10px;
	}

	.noRedPacketTip-box {}

	.noRedPacketTip-box img {
		width: 318px;
		height: 194px;
		display: block;
		position: absolute;
		top: 450px;
		left: 210px;
	}

	.noRedPacketTip-box p {
		margin: 60px auto 0;
		text-align: center;
		font-size: 32px;
		color: #bbbbbb;
	}

	.redPacketBoxHide {
		width: 100%;
		height: 80px;
		text-align: center;
		position: absolute;
		bottom: 250px;
		left: 0;
		display: none;
		animation: hideTip 2.8s;
	}

	.redPacketBoxShow {
		width: 100%;
		height: 80px;
		text-align: center;
		position: absolute;
		bottom: 250px;
		left: 0;
		animation: fadeTip 0.8s;
	}

	@keyframes fadeTip {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes hideTip {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}

	.redPacketdiv {
		width: auto;
		height: 80px;
		text-align: center;
		line-height: 80px;
		margin: 0 aotuo;
		color: white;
		background: rgba(0, 0, 0, 0.4);
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4), -1px -1px 5px rgba(0, 0, 0, 0.4);
		border-radius: 10px;
		font-size: 34px;
		padding: 0 20px;
		display: inline-block;
	}

	.huiColor {
		background: rgb(233, 233, 233);
	}

	.color99 {
		color: #999999;
	}

	.btnHui {
		background: rgb(204, 204, 204);
	}

	.red-code-base64-box {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/*.redCodeBase64Center {
		width: 750px;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.redCodeBase64Center div img {
		width: 500px;
		height: 500px;
	}

	.redCodeBase64Center div {
		background: #fff;
		text-align: center;
	}

	.redCodeBase64Center p {
		color: #000;
		text-align: center;
		font-size: 30px;
		padding-bottom: 15px;
	}

	.closeMe {
		width: 98px;
		text-align: center;
		margin-top: 15px;
	}*/

	.van-popup {
		width: 86%;
		border-radius: 6px
	}

	.mine-red-packet /deep/ .van-overlay {
		background-color: rgba(0, 0, 0, 0.4);
	}

	.exchange-rules-box {
		padding: 40px 26px 80px;
		text-align: justify;
	}

	.exchange-rules-box .title {
		margin-bottom: 30px;
		text-align: center;
		font-size: 40px;
		font-weight: 400;
		color: #222222;
	}

	.exchange-rules-box .tip-connect {
		font-size: 28px;
		color: #333333;
	}

	.exchange-rules-box .tip-connect p {
		line-height: 48px;
	}

	.forkOff {
		position: fixed;
		bottom: 24%;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 3000;
		height: 70px;
		width: 70px;
		background: url(../../assets/images/forkOff.png) no-repeat;
		background-size: 100% 100%;
	}

	.white-bg-box {
		width: 536px;
		height: 693px;
		background: #FFFFFF;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.conversion-title {
		font-size: 30px;
		font-weight: 400;
		color: #797979;
		margin: 26px 0 41px;
	}

	.conversion-box {
		width: 615px;
		height: 804px;
		background: url(../../assets/images/redPacket/conversion-bg.png) no-repeat;
		background-size: 615px 804px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.close-btn {
		width: 275px;
		height: 60px;
		background: linear-gradient(90deg, #FFB98A, #FFA35F);
		box-shadow: 7px 8px 18px 0px rgba(252, 103, 148, 0.35);
		border-radius: 25px;
		color: white;
		line-height: 60px;
		text-align: center;
		font-size: 32px;
		margin: 30px 0 10px 0;
	}

	.er-img-box {
		width: 380px;
		height: 380px;
		position: relative;
	}

	.er-code-img {
		width: 380px;
		height: 380px;
	}

	.er-time {
		width: 380px;
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -40px;
		background: #FFFFFF;
		font-size: 28px;
		font-weight: 500;
		color: #FF0101;
		text-align: center;
		padding: 10px 0;
		line-height: 40px;
	}

	.tip-text1 {
		font-size: 22px;
		font-weight: 400;
		color: #FF0101;
		margin-top: 20px;
	}
</style>
